<template>
  <div class="Lusir">
    <!-- vue3实战 -->
    简单粗暴{{props.msg}}
    完好的保存prop的响应特性:{{newMsg.msg.value}}
    <!-- 组件传的值：{{msg}} -->
    普通类型的值：{{newText}}
    对象的值：{{objNewText.msg}}
    数组的值{{arrayNewText[0].msg}}
    <button @click="emitFrom()">子组件调用父组件的方法</button>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  toRefs
  } from 'vue'
export default {
  name: 'LusirPage',
  props: {
    msg: String
  },
  setup(props,context){

    console.log(props,context,"这个上面有什么值吗？？")
    //普通类型的值
    const newText = ref(props.msg)
    // 复杂类型的值
    const objNewText = reactive({
      msg:props.msg
    })
    const arrayNewText = reactive([{
      msg:props.msg
    }])
    // 完好的保存prop的响应特性
    const newMsg = toRefs(props)
    // 获取父组件传的值重新赋值
    const getNewProps = ()=> {
      console.log(props.msg,newMsg.msg.value)
      newText.value = props.msg;
      objNewText.msg = props.msg;
      arrayNewText[0].msg = props.msg;
    }

    // 子组件调用父组件的方法
    const emitFrom=()=>{
      context.emit("getNewText","222222")
    }
    return {
      newMsg,
      props,
      objNewText,
      arrayNewText,
      getNewProps,
      emitFrom
    }
  },
  data(){
    return{

    }
  },
    created(){
       let system ={
        win : false,
        mac : false,
        xll : false
    };
    //检测平台
    let p = navigator.platform;
    system.win = p.indexOf("Win") == 0;
    system.mac = p.indexOf("Mac") == 0;
    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
 
    if(system.win||system.mac||system.xll){
        //PC端
        console.log('现在是电脑');
    }else{
        //移动端跳转的链接
        console.log('现在是手机');
    }
    },
  methods:{

  }
}
</script>

<style scoped>
.Lusir{
  padding-top: 40px;
  display: flex;
  justify-content: center;
  background-size: cover !important;
  -webkit-background-size: cover;
	-o-background-size: cover;
  /* background: url("../assets/backgroundImg.jpg") no-repeat; */
}
.main_personage{
  text-align: center;
  color: #ffff;
}
.head_portrait{
  border-radius: 50%;
  width: 256px;
  height: 256px;
  overflow: hidden;
  background: #58bc58;
}
.head_portrait_img{
  width: 100%;
  height: 100%;
}
.title_name{
  padding: 10px 0;
  font-size: 30px;
}
.title_main{
  border-top: #ffff solid 1px;
  border-bottom: #ffff solid 1px;
  padding: 10px 0;
}
.title_bottom{
  margin: 10px 0;

}
.pc_move{
  position: absolute;
  top: 10px;
  right: 10px;
}
.iframe_div{
  max-width: 240px;
}
</style>
